<template>
  <div class="wu-page">
    <!-- 表格顶部区域 -->
    <div class="wu-table-top-area">
      <div class="table-actions">
        <el-button type="primary" icon="Plus" @click="openDialog">
          添加品牌
        </el-button>
      </div>
    </div>

    <!-- 表格 -->
    <el-table class="wu-table" :data="listData">
      <el-table-column prop="id" label="编号" min-width="120" />
      <el-table-column prop="tmName" label="品牌名称" min-width="120" />
      <el-table-column prop="logoUrl" label="品牌LOGO" min-width="120">
        <template #default="scope">
          <el-image
            style="width: 60px; height: 60px"
            :src="scope.row.logoUrl"
            fit="contain"
            :preview-src-list="previewSrcList"
            preview-teleported
            :initial-index="scope.$index"
          />
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="120">
        <template #default="{ row }">
          <!-- 编辑 -->
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #default>编辑</template>
            <template #reference>
              <el-icon @click="openDialog(row)">
                <Edit />
              </el-icon>
            </template>
          </el-popover>
          <!-- 删除 -->
          <el-popover
            effect="light"
            trigger="hover"
            placement="top"
            width="auto"
          >
            <template #default>删除</template>
            <template #reference>
              <el-icon><Delete /></el-icon>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="wu-pagination">
      <el-pagination
        v-model:current-page="queryParams.page"
        v-model:page-size="queryParams.limit"
        :page-sizes="[5, 10, 50, 100]"
        small
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- 添加/更新Logo -->
    <LogoFormDialog
      v-model:visible="addVis"
      :edit-form="editFormRow"
      @success="handleSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { getProductBaseTrademark } from '@/apis/goods'
import LogoFormDialog from './components/LogoFormDialog.vue'
import { logoInt, logoParamsInt } from '@/types/goods'

const queryParams = reactive<logoParamsInt>({
  page: 1,
  limit: 10,
  tmName: ''
})
const pageTotal = ref(0)
// 获取用户列表
const listData = ref<any[]>()
// 图片预览数据
const previewSrcList = computed(() => {
  return listData.value?.map((item) => item.logoUrl)
})
const getListFun = async () => {
  const result = await getProductBaseTrademark(queryParams)
  listData.value = result.data?.records || []
  pageTotal.value = result.data?.total || 0
}
onMounted(() => {
  getListFun()
})
const handleSizeChange = (val: number) => {
  queryParams.limit = val
  queryParams.page = 1
  getListFun()
}
const handleCurrentChange = (val: number) => {
  queryParams.page = val
  getListFun()
}

const editFormRow = ref()
// 新增/编辑 弹窗open
const addVis = ref(false)
const openDialog = (row: logoInt) => {
  editFormRow.value = row

  addVis.value = true
}

// 表单成功处理
const handleSuccess = (id: number) => {
  if (!id) {
    // 新增page页码为1，编辑保持当前页码
    queryParams.page = 1
  }
  getListFun()
}
</script>

<style scoped lang="scss"></style>
